<script lang="ts" setup>
import { Icon as IconifyIcon } from "@iconify/vue"
import { isExternal } from "@/utils/validate.ts"

const { iconName, customClass } = defineProps<{
  iconName: string
  customClass?: string
}>()

const svgClass = computed(() => (customClass ? `icon ${customClass}` : "icon"))

const isExt = computed(() => isExternal(iconName))

// 通过mask 渲染svg图标  兼容不好
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  "-webkit-mask": `url(${iconName}) no-repeat 50% 50%`,
  "mask-size": "cover"
}))
</script>

<template>
  <IconifyIcon v-if="!isExt" :class="svgClass" :icon="iconName"></IconifyIcon>
  <div
    v-else
    :class="svgClass"
    :style="styleExternalIcon"
    bg-current
    v-bind="$attrs"
  ></div>
</template>

<style scoped></style>
